.outerItem {
  margin: 0 5px;
  position: relative;

  .child {
    display: none;
  }

  &:hover {
    > .item {
      background: var(--color-surface-hover);
    }

    > .item.disabled {
      background: inherit;
    }

    > .child {
      display: contents;
    }
  }

}

.item {
  display: flex;
  cursor: pointer;
  border-radius: 4px;

  .label {
    padding: 7px 5px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .icon {
    align-items: center;
    justify-content: center;
    display: flex;
    margin-left: 10px;
    margin-right: 3px;
    width: 15px;
    flex-shrink: 0;

    img {
      width: 15;
      height: 15px;
    }
  }

  .right {
    padding: 7px 5px;
    margin: 0 5px;
    flex-shrink: 0;
  }

  .arrow {
    width: 20px;
    margin: 0 5px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    display: flex;
  }
}

.destructive {
  color: var(--color-critical);
}

.disabled {
  color: var(--color-text-disabled);
}

.separator {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
